指令 v-model、v-on

▸ v-model

幫助 template 裡面的 DOM 元素與 data 裡面的屬性做雙向綁定。

從官方的表單範例來看，如果不使用 v-model，會多了很多複雜的程序：

<input
  :value="text"
  @input="event => text = event.target.value">

而 v-model 能夠直接做雙向綁定簡化步驟：

<input v-model="text">

<script>
export default {
  data() {
    return {
      text: 'Vue'  
    }
  }
}
</script>

v- model 雙向綁定常使用在 input、select、textarea、components：

• select

<template>
  <span> Selected: {{ selected }}</span>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

這裡官方也特別強調，如果 v-model 初始值和任何一個選項都不匹配，在一般情況下會是一個「未選擇」的狀態，但如果是在 ios 上則會導致無法選擇第一個項目，因為 ios 在這種情況下不會觸發 change 事件，因此建議提供一個 disabled 選項。

• textarea

textarea 方法示範：

<!-- 正確 -->
<textarea v-model="text"></textarea>

有一點要特別注意，textarea 不支援插值表達式，也就是我們常用的雙括號：

<!-- 錯誤 -->
<textarea>{{ text }}</textarea>

▸ v-on

替元素綁定一個事件監聽，縮寫為「＠」，通常可以看見這樣子的寫法：

<button @click="doThis"></button>

v-on 通常綁定一個需要觸發的事件，最常見的就是點擊，至於點擊觸發什麼，則依據需要傳遞的資料搭配適合的指令，譬如 v-bind 或修飾符。

➔
任務 ①
操作 這個模板，執行以下要求 ( 只能操作 HTML 的部分 )：

在 input 欄位輸入文字後，點擊「觸發按鈕」可以觸發 callName 函式

解答：

<div id="app">
  <div class="container p-3">
    <div class="d-flex flex-column">
      <label for="name">請輸入姓名</label>
      <input type="text" class="mb-3" v-model="name">
    </div>
    <button type="button" class="btn btn-primary" @click="callName">觸發事件</button>
  </div>
</div>

任務 ②

操作 這個模板，執行以下要求 ( 只能操作 HTML 的部分 )：

說明：

1. 請使用 v-model、v-bind、 v-for 的概念完成練習，填寫上方的表單將可以同步更新下方 ul 的資料。
2. 選項的 label for、input id 需要互相對應。
3. Q2、 Q3、 Q4 的選項需要用 v-for 呈現。
4. Q5 的部分只需要用一個 checkbox 並會在 true 和 false 之間做切換。

解答：

CodePen：https://codepen.io/kimberly8/pen/NWYmyVP

這些小練習真的是很簡單，對有些人來說可能閉著眼睛也能寫。（有這回事!?）

事實上越是簡單基礎的東西越容易被忽略，因為覺得簡單所以不需要做練習，慢慢的也就忘了，日積月累忽略這些簡單的小東西，就像偷工減料的房子，表面看似堅強，可能來個颱風或是小地震就垮掉了。

我自己是覺得有些簡單的東西，很有可能就是一個語言的基礎核心，所以如果在練習的各位還對於這些題目有點疑惑，不要懷疑，練他個倒背如流就對了。